Size Change: +95 B (0%)

Total Size: 1.26 MB

_{compressed-size-action}

Nice! I've just tested it and it looks good to me ✨

I agree. The changes looks good to me as well!

cc @ciampo @mirka about how to proceed here. Repeating the work specifically for the color picker in the border control doesn't seem like the optimal approach.

We could try to implement the solution proposed in #41937 (comment) — what do you think, @mirka ?

Yes, I'll look into this within the next few days and report back 👍

Progress update

• Padding: I'm proposing a solution in Dropdown: Add wrapper for custom padding #42595.
• Weird bottom margin: This can actually be removed via a prop on BaseControl. (We're actually aiming to deprecate this margin.)
• Content width: I'm kind of indifferent about this at the moment. If it's just for color-gradients and BorderControl, it might be too early to abstract into some kind of shared system. I don't mind keeping this ad hoc approach until we see one or two more instances where this is needed.

@jameskoster Ok I'm done ✅

• Increased padding is now applied in a clean way.

• Width is set without reaching into the internal .components-popover__content class.

• Same styling changes are applied on BorderControl:

  CleanShot.2022-07-23.at.01.39.05.mp4

☝️ By the way, do we care that the checkered pattern for the "transparent" color is now cut off at an awkward place? The background pattern isn't adhering to the 4px grid system (the squares are 25px). We might want to address that in a follow-up.

Thanks @mirka ! :)

The padding is a bit awkward here since we switched to tabs:

But I think that's something to fix in the tabpanel component (#42320).

The background pattern isn't adhering to the 4px grid system (the squares are 25px). We might want to address that in a follow-up.

Agreed. For now I don't think it's a deal-breaker.

Sidetrack comment...Related to the Color Panels.
It seems like the Link Color Panel has a Clear color text option while the Text and Background color options do not.
All Color Panels should have the clear option.
Made an issue for it here: #42689

Coming back to this one (thank you for the energy and attention to details!) — I like the padding around the swatches, but the larger padding around the current color spot feels more awkward now, with the same 2px radius looking extra out of place. The panel was originally designed to have that be edge-to-edge, like this:

I believe the previous non-standard padding is something we arrived at exactly because edge-to-edge turned out to be non-trivial to implement. Is that still the case or could we revisit that? CC: @ciampo in case you recall details.

Oh yes, that would be a nice enhancement.

I believe the previous non-standard padding is something we arrived at exactly because edge-to-edge turned out to be non-trivial to implement. Is that still the case or could we revisit that? CC: @ciampo in case you recall details.

@mirka 's work with #42595 may make some of this easier, but we'd still need to take a closer look

@jasmussen I'm looking into getting the awkward padding resolved and also get the current color button be edge-to-edge, like in your mockup. One follow-up question: How do we want the edge-to-edge current color button to look when it's under the Solid/Gradient tab switcher? Edge-to-edge with no top-margin?

Thank you!

One follow-up question: How do we want the edge-to-edge current color button to look when it's under the Solid/Gradient tab switcher? Edge-to-edge with no top-margin?

That's an excellent question. When there's no switcher, this is the previous flow mocked up:

I have an older discarded variant here that I don't love, which nevertheless affords an item above the edge to edge swatch:

My preference, however, would be to always keep the current indicator as the first item, as seen in the mockups for this pattern addition:

That's one of the reasons why I've preferred the segmented control. It is secondary to the main color... a property, so to speak, rather than a distinct tab.

Potentially also relevant, #39452 which details iterations to the duotone configuration, which also keeps the preview/current duotone at the top.

Started a tracking issue here: #43014

I love that design! Funnily, to me that flipped order makes the tab panel model even more "correct" 😆

I think the fundamental difference between a tab panel and a radio is that, a radio is for a "value" that is to be submitted or persisted, whereas a tab panel is just a temporary way to expand/collapse information, much like an accordion. In theory you should be able to expand all the panels into a vertical list and it should still make sense.

The flipped order you propose makes a very logical hierarchy to me:

• Current color ("the value to be submitted")
• Preset colors to choose from
  • Solid
    • Theme colors
    • Default colors
  • Gradient
    • Theme colors
    • Default colors

Whereas previously it was kind of murky:

• Solid
  • Current color ("the value to be submitted")
  • Preset colors to choose from
    • Theme colors
    • Default colors
• Gradient
  • Preset colors to choose from
    • Theme colors
    • Default colors
  • Current color ("the value to be submitted") 👈 this appears twice in the list when there's only one value that will be submitted from this popover

So that leads me to a few more questions:

1. Am I correct to assume that we're also flipping the order for the Gradient picker? This part goes on top of the tabs switcher?

   

2. Are we flipping the order when this picker appears in the Global Styles sidebar as well? (minus the edge-to-edge treatment maybe?)

Am I correct to assume that we're also flipping the order for the Gradient picker? This part goes on top of the tabs switcher?

Good question. That could be interesting. It seems like that might also line up with some of the hierarchy proposed for gradients in the global styles inspector:

Imprecise mockup, but something along these lines:

That would also answer your second question, as it appears the order in the Global Styles mockup I found already orders it current color/gradient first, followed by configuration, then swatches.

If you have a moment to look, @pablohoneyhoney, I'd love your thoughts.